
@mixin button-theme($color, $background, $border) {
  $active-background: darken($background, 10%);
  $active-border: darken($border, 12%);
  
  background-color: $background;
  border-color: $border;
  color: $color;
  
  &:hover {
    background-color: $active-background;
        border-color: $active-border;
               color: $color;
  }

  &:focus,
  &.focus {
    background-color: $active-background;
        border-color: $active-border;
               color: $color;
  }

  &:active,
  &.active {
    background-color: $active-background;
        border-color: $active-border;
               color: $color;
    background-image: none;
    box-shadow: inset 0 3px 5px rgba(0,0,0,.125);

    &:hover,
    &:focus,
    &.focus {
      background-color: darken($background, 17%);
          border-color: darken($border, 25%);
                 color: $color;
    }
  }
  
  &.disabled,
  &:disabled {
    cursor: not-allowed;
    
    &:focus,
    &.focus {
      background-color: $background;
          border-color: $border;
    }
    &:hover {
      background-color: $background;
          border-color: $border;
    }
  }
}

@mixin button-size($height, $padding, $font-size, $border-radius) {
  padding: $padding;
  font-size: $font-size;
  height: $height;
  line-height: $height - 2;

  &.radius {
    border-radius: $border-radius;
  }
  
  &.round {
    border-radius: 1000px;
  }

  &.circle {
    width: $height;
    height: $height;
    padding: 0;
    font-size: $font-size + 2;
    border-radius: 50%;
  }

  .ui-icon + span,
  span + .ui-icon {
    margin-left: $height / 10;
  }
}

.ui-button {
  display: inline-block;
  margin-bottom: 0;
  @include button-size($base-height, 0 10px, $base-fontSize, $base-radius);
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  background-image: none;
  border: 1px solid transparent;
  /*border-width: 0;*/
  cursor: pointer;
  outline: 0;
  -webkit-appearance: none;
  user-select: none;
  transition: background-color 300ms ease-out, border-color 300ms ease-out;
  
  /* disabled Button */
  &.disabled,
  &:disabled {
    cursor: not-allowed;
    opacity: .65;
    box-shadow: none;
  }

  /* block Button */
  &.block {
    width: 100%;
    display: block;
  }

  /* Button sizes */
  &.size-xl {
    @include button-size($base-height-xl, 0 14px, $base-fontSize-xl, $base-radius-xl);
  }
  &.size-lg {
    @include button-size($base-height-lg, 0 12px, $base-fontSize-lg, $base-radius-lg);
  }
  &.size-sm {
    @include button-size($base-height-sm, 0 8px, $base-fontSize-sm, $base-radius-sm);
  }
  &.size-xs {
    @include button-size($base-height-xs, 0 4px, $base-fontSize-xs, $base-radius-xs);
  }

  /* Button themes */
  &.theme-default {
    @include button-theme($base-btn-default-color, $base-btn-default-bg, $base-btn-default-border);
  }
  &.theme-info {
    @include button-theme($base-btn-info-color, $base-btn-info-bg, $base-btn-info-border);
  }
  &.theme-success {
    @include button-theme($base-btn-success-color, $base-btn-success-bg, $base-btn-success-border);
  }
  &.theme-warning {
    @include button-theme($base-btn-warning-color, $base-btn-warning-bg, $base-btn-warning-border);
  }
  &.theme-error {
    @include button-theme($base-btn-error-color, $base-btn-error-bg, $base-btn-error-border);
  }

}

